<template>
    <div class="InvoiceInfo2">
        <div class="shareHeadClass">
            <p class="colCLas"></p>
            <p class="info">发票信息栏</p>
        </div>

        <el-form
            :model="vmsApprovalHzqrdSimpleVo"
            label-width="100px"
            class="formInline"
            size="small"
            ref="selfForm"
        >
            <div style="margin-bottom: 8px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="允许差异额：">
                            <el-input
                                v-model="vmsApprovalHzqrdSimpleVo.yxcyje"
                                placeholder="请输入差异额"
                                @blur="handleInput1"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="当前匹配差异额：" label-width="120px">
                            {{ vmsApprovalHzqrdSimpleVo.dqppcyje }}
                            {{ vmsApprovalHzqrdSimpleVo.dqppcyje? '元':''}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="差异金额说明：">
                            <el-input
                                type="textarea"
                                maxlength="500"
                                :rows="5"
                                v-model="vmsApprovalHzqrdSimpleVo.cyjesm"
                                show-word-limit
                                                                @input="handleInput2"
                                placeholder="差异金额说明"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <el-form-item label="发票信息：">
                <tableList
                    v-if="tableShow"
                    :showIndex="true"
                    border
                    maxHeight="200"
                    :keySet="keySet"
                    :tableData="vmsApprovalHzqrdSimpleVo.fpxxDetailList"
                    ref="tableRef"
                >
                    <template #gmfmc="{ row }">
                        <div>
                            {{ row.gmfmc }}
                        </div>
                    </template>
                </tableList>
            </el-form-item>

            <el-form-item label="明细行信息：">
                <tableList
                    :showIndex="true"
                    border
                    maxHeight="260"
                    :keySet="keySet2"
                    :tableData="vmsApprovalHzqrdSimpleVo.fpxxItemList"
                    ref="tableRef"
                >
                    <template #gmfmc="{ row }">
                        <div>
                            {{ row.gmfmc }}
                        </div>
                    </template>
                </tableList>
            </el-form-item>
        </el-form>

        <invoiceInformation16Dialog
            v-model="lookFlowShow"
            :formComputed="rowForm"
        ></invoiceInformation16Dialog>
    </div>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
import invoiceInformation16Dialog from './components/invoiceInformation16Dialog.vue'
import { fastAdd, getApplyDetail } from '@/api/matchFlow.js'
import { valitedLimitNumber } from '@/utils/validate.js';

export default {
    name: 'invoiceInformation16',
    props: {
        flag: {
            type: String,
            // default:''
        },
        isLook: {
            type: Boolean,
            default: false,
        },
        nodeId: {
            type: String,
            default: '',
        },
    },
    mounted() {
        this.initDetail()
    },
    data() {
        return {
            lookFlowShow: false,
            vmsApprovalHzqrdSimpleVo: {},
            rowForm: {},

            tableShow: true,
            keySet: [
                {
                    label: '销售方名称',
                    englishName: 'xsfmc',
                    width: '200',
                },
                {
                    label: '发票类型',
                    englishName: 'fplx',
                    width: '160',
                },
                {
                    label: '发票号码',
                    englishName: 'fphm',
                },
                {
                    label: '发票代码',
                    englishName: 'fpdm',
                    width: 'labelWidth',
                },
                {
                    label: '开票日期',
                    englishName: 'kprq',
                    width: 'labelWidth',
                },
                {
                    label: '购买方名称',
                    englishName: 'gmfmc',
                    width: 'labelWidth',
                },
                {
                    label: '购买方纳税人识别号',
                    englishName: 'gmfsbh',
                    width: 'labelWidth',
                },
                {
                    label: '不含税金额',
                    englishName: 'hjje',
                    width: 'labelWidth',
                },
                {
                    label: '税额',
                    englishName: 'hjse',
                },
                {
                    label: '含税金额',
                    englishName: 'jshj',
                },
            ],
            keySet2: [
                {
                    label: '项目名称',
                    englishName: 'spmc',
                    width: '200',
                },
                {
                    label: '规格型号',
                    englishName: 'ggxh',
                    width: '160',
                },

                {
                    label: '单位(面积单位)',
                    englishName: 'jldw',
                    width: 'labelWidth',
                },
                {
                    label: '数量',
                    englishName: 'gmsl',
                    width: '100',
                },
                {
                    label: '单价',
                    englishName: 'dj',
                },
                {
                    label: '不含税金额',
                    englishName: 'je',
                    width: 'labelWidth',
                },
                {
                    label: '税率',
                    englishName: 'sl',
                    width: '100',
                },
                {
                    label: '税额',
                    englishName: 'se',
                    width: '100',
                },
            ],
        }
    },
    methods: {
        initDetail() {
            let obj = JSON.parse(sessionStorage.getItem('handleDetailInfo'))
            let id =
                obj.busId || this.$store.state.invoice2.invoinceFormStart1.busId
            getApplyDetail(id).then(({ data, code, message }) => {
                if (code == 200) {
                    this.vmsApprovalHzqrdSimpleVo = {
                        ...data.invoiceDetail,
                        ...data.matchAllowError,
                        fpxxDetailList: [data.invoiceDetail],
                        fpxxDetail: data.invoiceDetail,
                        fpxxItemList: data.invoiceItemList,
                    }
                    this.$store.commit("fpxxlStore/changeMatchAllowError",data.matchAllowError)
                    setTimeout(() => {
                        this.$refs.selfForm.clearValidate()
                    }, 20)
                }
            })
        },
        handleInput1(val) {
              let a = this.bigNumFixed(valitedLimitNumber(this.vmsApprovalHzqrdSimpleVo.yxcyje, {
                        leftLength: 18,
                        rightLength:6,
                      }), 2)
                      console.log(a)
            this.vmsApprovalHzqrdSimpleVo.yxcyje = a
            this.$store.commit("fpxxlStore/changeMatchAllowError",{
               yxcyje :  this.vmsApprovalHzqrdSimpleVo.yxcyje
            })
        },
        handleInput2(val) {
            this.$store.commit("fpxxlStore/changeMatchAllowError",{
               cyjesm :val
            })
            
        },
        rowDblclick(val) {
            this.rowForm = val
            this.lookFlowShow = true
        },
    },
    components: {
        tableList,
        invoiceInformation16Dialog,
    },
}
</script>

<style lang = "scss" scoped>
.InvoiceInfo2 {
    width: 100%;
    ::v-deep .el-form-item__error {
        top: 70%;
    }
    ::v-deep .el-dialog__body {
        padding: 10px 20px;
    }
    ::v-deep .el-dialog__footer {
        padding: 0px 20px 10px;
    }
}

::v-deep .el-table__body tr.current-row > td {
    background-color: #fbec88 !important;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
    background-color: #fbec88 !important;
}
</style>
